<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性监听器</title>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        em {
            font-style: normal;
        }

        a {
            text-decoration: none;
        }

        container {
            display: flex;
            justify-content: space-between;
            width: 800px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="container" v-cloak>
        <label for="username">姓名：</label><input type="text" name="username" id="username" v-model="username">
        <label for="username">人员姓名：</label><input type="text" name="name" id="name" v-model="person.name">
        <label for="username">人员年龄：</label><input type="text" name="age" id="age" v-model="person.age">
    </div>

    <script src="./js/dev/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#container',
            data: {
                username: '',
                person: {
                    name: '',
                    age: ''
                }
            },
            methods: {

            },
            computed: {

            },
            watch: {
                // 简单配置
                username(newValue, oldValue) {
                    console.log(`newValue = ${newValue}, oldValue = ${oldValue}`);
                },
                // 完整配置
                person: {
                    // 开启 深度属性监听
                    deep: true,
                    // Vue 实例初始化后，立即执行一次
                    immediate: true,
                    // 直接定义 handler函数
                    // handler(newValue, oldValue) {
                    //     console.log(`人员信息：newValue = ${JSON.stringify(newValue)}, oldValue = ${JSON.stringify(oldValue)}`);
                    // }
                    // 键值对方式定义
                    handler: function (newValue, oldValue) {
                        console.log(`人员信息：newValue = ${JSON.stringify(newValue)}, oldValue = ${JSON.stringify(oldValue)}`);
                    }
                }
            }
        })
    </script>
</body>

</html>